<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>

    <multi-fun-table
      :sortColumn="notFormatColumn"
      :orderType="sortType"
      :fixed-cols="fixedCols"
      :is-reset-table="isResetTable"
      :theads-info="theadsInfo"
      :tbodys-info="tbodysInfo"
      @handleMultiCheck="handleMultiCheck"
      @handleSortColumn="handleSortColumn"
      @searchFn="getList"
      @getNextPage="getNextPage"
    >
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a
          class="ake_btn ake_btn_text"
          v-if="isPermmited('PLATFORM:OPERATOR:SAVE')"
          @click.prevent="toOpenOperatorAdd('operatorFormAddModal')"
        >新增</a>
      </div>

      <!--普通列-->
      <template slot="tdCell" slot-scope="props">
        <el-table-column
          :fixed="props.fixed"
          :label="props.label"
          :min-width="props.minWidth"
          :width="props.width"
          :prop="props.prop"
          :sortable="props.sortable"
        >
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
            <span v-else-if="'createTime' == props.prop">{{scope.row[props.prop]|mileSecondToDate}}</span>
            <span v-else-if="'modifyTime' == props.prop">{{scope.row[props.prop]|mileSecondToDate}}</span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" min-width="380">
          <template slot-scope="scope">
            <el-button
              title="锁定"
              size="small"
              type="primary"
              class="ake_btn_text"
              v-if="isPermmited('PLATFORM:OPERATOR:UPDATESTATUS') && scope.row.status=='NORMAL'"
              @click="frozenOperator(scope.row)"
            >锁定</el-button>
            <el-button
              title="开启"
              size="small"
              type="primary"
              class="ake_btn_text"
              v-if="isPermmited('PLATFORM:OPERATOR:UPDATESTATUS') && scope.row.status=='LOCKED'"
              @click="enableOperator(scope.row)"
            >开启</el-button>
            <el-button
              title="编辑"
              size="small"
              type="primary"
              class="ake_btn ake_font_btn ake_btn_text"
              icon="el-icon-edit"
              v-if="isPermmited('PLATFORM:OPERATOR:SAVE')"
              @click="toOpenOperatorEdit(scope.row,'operatorFormAddModal')"
            ></el-button>
            <el-button
              title="删除"
              size="small"
              type="primary"
              class="ake_btn ake_font_btn ake_btn_red"
              icon="el-icon-delete"
              v-if="isPermmited('PLATFORM:OPERATOR:DEL')"
              @click="delOperator(scope.row)"
            ></el-button>
            <el-button
              title="详情"
              size="small"
              type="primary"
              class="ake_btn ake_font_btn ake_btn_text"
              icon="el-icon-info"
              v-if="isPermmited('PLATFORM:OPERATOR:DETAIL')"
              @click="toOpenOperatorLook(scope.row,'operatorFormAddModal')"
            ></el-button>
            <el-button
              title="绑定停车场"
              size="small"
              type="primary"
              :disabled="scope.row.status!='NORMAL'"
              class="ake_btn_text"
              v-if="isPermmited('PLATFORM:OPERATOR:BINDPARK')"
              @click="toOpenBindPark(scope.row,'bindParkModal','bindParkTree')"
            >绑定车场</el-button>
            <el-button
              title="修改密码"
              size="small"
              type="primary"
              :disabled="scope.row.status!='NORMAL'"
              class="ake_btn_text"
              v-if="isPermmited('PLATFORM:OPERATOR:MODIFYPWD')"
              @click="toOpenPwdEdit(scope.row,'pwdFormModal')"
            >修改密码</el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <!---->
    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>

    <!--新增下级运营商-->
    <basic-modal ref="operatorFormAddModal" width="600" customeClass="user-row-modal" static="true">
      <h3 slot="title">新增下级运营商</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="operaotrForm"
          :model="operaotrForm"
          :rules="rules"
          label-position="left"
          label-width="160px"
        >
          <el-form-item label="运营商名称" prop="name">
            <el-input class="first-item" v-model="operaotrForm.name" :disabled="cannotEdit('look')"></el-input>
          </el-form-item>
          <el-form-item label="选择区域" prop="areaName">
            <el-input class="first-item" v-model="operaotrForm.areaName" :disabled="true"></el-input>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PLATFORM:OPERATOR:LIST') && !cannotEdit('look')"
              @click.prevent="toOpenSelectAreaModal('selectAreaTree','selectAreaModal')"
            >请选择</a>
          </el-form-item>
          <el-form-item label="详细地址" prop="address">
            <el-input
              type="textarea"
              class="first-item"
              v-model="operaotrForm.address"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contactor">
            <el-input
              class="first-item"
              v-model="operaotrForm.contactor"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人手机" prop="mobile">
            <el-input
              class="first-item"
              v-model="operaotrForm.mobile"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人邮箱" prop="email">
            <el-input
              class="first-item"
              v-model="operaotrForm.email"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人座机" prop="tel">
            <el-input class="first-item" v-model="operaotrForm.tel" :disabled="cannotEdit('look')"></el-input>
          </el-form-item>
          <!-- 自动上传和代码实现只能上传一个图片 -->
          <el-form-item label="运营牌照图片" prop="licenseImg" v-if="!cannotEdit('look')">
            <el-upload
              class="upload-demo"
              ref="licenseImgUpload"
              action="#"
              :http-request="uploadLicenseImg"
              :before-upload="beforeUploadLicenseImg"
              :on-remove="removeLicenseImg"
              :file-list="licenseImg"
              :accept="'image/png,image/jpeg,image/jpg'"
              :multiple="false"
              :auto-upload="true"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">支持jpg、jpeg、png格式，大小不超过2.0M</div>
              <img
                v-if="cannotEdit('edit') && operaotrForm.licenseImg"
                :src="operaotrForm.licenseImg"
                alt="暂无"
                style="height:180px;"
              />
            </el-upload>
          </el-form-item>
          <el-form-item label="法人身份证照片" prop="legalIdentityImg" v-if="!cannotEdit('look')">
            <el-upload
              class="upload-demo"
              ref="legalIdentityImgUpload"
              action="#"
              :http-request="uploadLegalIdentityImg"
              :before-upload="beforeUploadLegalIdentityImg"
              :on-remove="removeLegalIdentityImg"
              :file-list="legalIdentityImg"
              :accept="'image/png,image/jpeg,image/jpg'"
              :multiple="false"
              :auto-upload="true"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <div slot="tip" class="el-upload__tip">支持jpg、jpeg、png格式，大小不超过2.0M</div>
              <img
                v-if="cannotEdit('edit') && operaotrForm.legalIdentityImg"
                :src="operaotrForm.legalIdentityImg"
                alt="暂无"
                style="height:180px;"
              />
            </el-upload>
          </el-form-item>
          <el-form-item label="公司规模" prop="companyScale">
            <el-select
              v-model="operaotrForm.companyScale"
              placeholder="请选择"
              :disabled="cannotEdit('look')"
            >
              <el-option
                v-for="item in companyScale"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="简介" prop="briefIntroduction">
            <el-input
              type="textarea"
              class="first-item"
              v-model="operaotrForm.briefIntroduction"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="bankName">
            <el-input
              class="first-item"
              v-model="operaotrForm.bankName"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="结算银行账号" prop="bankCount">
            <el-input
              class="first-item"
              v-model="operaotrForm.bankCount"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户账号人" prop="bankAccountName">
            <el-input
              class="first-item"
              v-model="operaotrForm.bankAccountName"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item label="结算联系人手机号" prop="settlementMobile">
            <el-input
              class="first-item"
              v-model="operaotrForm.settlementMobile"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="用户名称"
            prop="loginId"
            v-if="!cannotEdit('look') && !cannotEdit('edit')"
          >
            <el-input
              class="first-item"
              v-model="operaotrForm.loginId"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户昵称"
            prop="nickName"
            v-if="!cannotEdit('look') && !cannotEdit('edit')"
          >
            <el-input
              class="first-item"
              v-model="operaotrForm.nickName"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户密码"
            prop="passWord"
            v-if="!cannotEdit('look') && !cannotEdit('edit')"
          >
            <el-input
              class="first-item"
              v-model="operaotrForm.passWord"
              type="password"
              auto-complete="off"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="passWordAgain"
            v-if="!cannotEdit('look') && !cannotEdit('edit')"
          >
            <el-input
              class="first-item"
              v-model="operaotrForm.passWordAgain"
              type="password"
              auto-complete="off"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户手机"
            prop="userMobile"
            v-if="!cannotEdit('look') && !cannotEdit('edit')"
          >
            <el-input
              class="first-item"
              v-model="operaotrForm.userMobile"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户邮箱"
            prop="userEmail"
            v-if="!cannotEdit('look') && !cannotEdit('edit')"
          >
            <el-input
              class="first-item"
              v-model="operaotrForm.userEmail"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户地址"
            prop="userAddress"
            v-if="!cannotEdit('look') && !cannotEdit('edit')"
          >
            <el-input
              type="textarea"
              class="first-item"
              v-model="operaotrForm.userAddress"
              :disabled="cannotEdit('look')"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('operatorFormAddModal')">取消</button>
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="saveOperatorForm('operaotrForm','operatorFormAddModal')"
          v-show="cannotEdit('add') || cannotEdit('edit')"
        >确认</button>
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="closed('operatorFormAddModal')"
          v-show="cannotEdit('look')"
        >确认</button>
      </div>
    </basic-modal>

    <!--选择区域树-->
    <basic-modal ref="selectAreaModal" width="600" customeClass="select-Park-modal" static="true">
      <h3 slot="title">选择区域</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="selectAreaTree" name="selectAreaTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="selectArea('selectAreaTree','selectAreaModal')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('selectAreaModal')">取消</button>
      </div>
    </basic-modal>

    <!--绑定停车场-->
    <basic-modal ref="bindParkModal" width="600" customeClass="select-Park-modal" static="true">
      <h3 slot="title">绑定停车场</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <div class="noAuthText" v-show="noAuthText">{{noAuthText}}</div>
          <ul v-show="!noAuthText" id="bindParkTree" name="bindParkTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="saveBindPark('bindParkTree','bindParkModal')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('bindParkModal')">取消</button>
      </div>
    </basic-modal>

    <!--重置密码-->
    <basic-modal ref="pwdFormModal" width="600" customeClass="user-row-modal" static="true">
      <h3 slot="title">修改密码【{{pwdForm.name}}】</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="pwdForm"
          :model="pwdForm"
          :rules="pwdRules"
          label-position="left"
          label-width="160px"
        >
          <!-- <el-form-item label="旧密码" prop="oldPassword">
            <el-input class="first-item" v-model="pwdForm.oldPassword" type="password" auto-complete="off"></el-input>
          </el-form-item>-->
          <el-form-item label="新密码" prop="newPassWord">
            <el-input
              class="first-item"
              v-model="pwdForm.newPassWord"
              type="password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="passWordAgain">
            <el-input
              class="first-item"
              v-model="pwdForm.passWordAgain"
              type="password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="editOperatorPwd('pwdForm','pwdFormModal')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('pwdFormModal')">取消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import "../../assets/js/libs/jquery.ztree.core.min.js";
import "../../assets/js/libs/jquery.ztree.excheck.min.js";
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import Operator from "./js/Operator.js";

export default {
  mixins: [common, stardardList, invokeModal, Operator],
  data() {
    return {
      total: 0,
      fixedCols: 3,
      searchList: [
        // {
        //   index: 0,
        //   isShow: false,
        //   type: "text",
        //   name: "name",
        //   text: "运营商名称",
        //   value: ""
        // },
        {
          index: 1,
          isShow: false,
          type: "text",
          name: "loginId",
          text: "用户名称",
          value: ""
        },
        {
          index: 2,
          isShow: false,
          type: "text",
          name: "email",
          text: "电子邮箱",
          value: ""
        },
        {
          index: 3,
          isShow: false,
          type: "text",
          name: "mobile",
          text: "手机号码",
          value: ""
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "name",
          text: "运营商名称",
          minWidth: 180
        },
        {
          index: 2,
          isShow: false,
          prop: "areaName",
          text: "地区",
          minWidth: 110
        },
        {
          index: 3,
          isShow: false,
          prop: "loginId",
          text: "用户名称",
          minWidth: 110
        },
        {
          index: 4,
          isShow: false,
          prop: "nickName",
          text: "昵称",
          minWidth: 110
        },
        { index: 5, isShow: false, prop: "email", text: "邮箱", minWidth: 180 },
        {
          index: 6,
          isShow: false,
          prop: "mobile",
          text: "手机",
          minWidth: 130
        },
        {
          index: 7,
          isShow: false,
          prop: "statusName",
          text: "状态",
          minWidth: 68
        },
        {
          index: 8,
          isShow: false,
          prop: "createTime",
          text: "创建时间",
          minWidth: 180
        },
        {
          index: 9,
          isShow: false,
          prop: "modifyTime",
          text: "最后更新时间",
          minWidth: 180
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {}
};
</script>

<style lang="less">
@import "../../assets/less/libs/zTreeStyle.css";
.noAuthText {
  height: 100%;
  text-align: center;
  line-height: 100px;
}
.user-row-modal {
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}
</style>